<template>
    <div class="user-info">
        <span class="username">{{ user.name }}</span>
        <button class="logout-button" @click="logout">
            退出登录
        </button>
    </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {store} from "@/store";
import router from "@/router";

// 用户信息 (实际项目中应从 store 或 API 获取)
const user = ref({
    name: '用户名',

})

// 登出功能
const logout = () => {
    // 实现登出逻辑
    console.log('用户登出')
    user.value.name = ''
    store.dispatch('login/logout')
    router.push('/login')
    // 示例登出逻辑：
    // 1. 清除本地存储的用户信息
    // localStorage.removeItem('token')
    // 2. 重定向到登录页面
    // router.push('/login')
}
// 更新用户名的函数
const updateUserName = () => {
    const storedUserName = localStorage.getItem('user_name')
    if (storedUserName) {
        user.value.name = storedUserName
    }
}


onMounted(() => {
    updateUserName()
})
</script>

<style scoped>
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.username {
    font-weight: 500;
    color: #ffffff;
}

.logout-button {
    background-color: #f39c12;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s;
}

.logout-button:hover {
    background-color: #e67e22;
}
</style>
